<template>
	<view>
		<view class=" flex flex-y-center text-center gap-8 fs-18 ">
			<view class="flex-1 round-8  relative py-11" @click="onChange(item)" :class="{
				'disable': item.disable,
							  'gradient':modelValue == item.value,
							  'bg-black-1': modelValue != item.value
							}" v-for="(item,index) in list" :key='index'>
				{{item.label}}
				<image src="/static/image/hot.png" v-if="item.isHot" class="h-24 absolute top--12 left--3"
					mode="heightFix"></image>
			</view>
		</view>
		<text v-if="tips" class="fs-12 text-brown-2">{{tips}}</text>
	</view>
</template>

<script setup>
	import { computed, ref, watch } from 'vue';

	const props = defineProps({
		modelValue: {
			type: [Number, String],
			default: ''
		},
		list: {
			type: [Object, Array],
			default: []
		}
	})
	const emit = defineEmits(['onChange', 'update:modelValue'])
	const onChange = (e) => {
		if (e.disable) {
			return;
		}
		emit('update:modelValue', e.value);
		emit('onChange', e.value);
	}
	const tips = computed(() => {
		const item = props.list.find(e => e.value === props.modelValue)
		const name = item?.tips || ''
		return name
	})
</script>

<style>
	.disable {
		background-color: #4b4b4e !important;
		color: #999;
	}
</style>